<template>
  <view class="warp">
   <!-- 开课奖励 -->
   <view class="start-class">
     <view class="step-add">
       <view class="btn-contact" @click="addTeacher(1)" ref="buriedPoint1" name="去联系">
         <image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/guide_btn1.png"></image>
        </view>
       <view class="group"  @click="addTeacher(2)" ref="buriedPoint2" name="入群">
          <image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/guide_btn2.png"></image>
        </view>
       <view class="receive"  @click="addTeacher(3)" ref="buriedPoint3" name="领取礼包">
          <image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/guide_btn3.png"></image>
        </view>
       <view class="surplus">仅剩 &nbsp;<text class="num-red">{{ giftsNumber }}</text> 份</view>
       <!-- 轮播 -->
       <view class="gifts-swiper">
         <swiper
           :current="swiperIndex"
           autoplay
           indicator-active-color="#FF800C"
           :circular="true"
           :interval="3000"
           style="overflow: hidden;" 
           duration="400">
           <swiper-item v-for="(k,i) in giftsSwiperList" :key="i">
             <image :src="k.imgUrl" class="bannerImg" mode="aspectFill" style="overflow: hidden;"></image>
           </swiper-item>
         </swiper>
       </view>
     </view>
     <view class="title" @click="startclass(4)" id="id1" ref="buriedPoint4" name="点击开课奖励图片"></view>
   </view>
   
   <!-- 课程特色 -->
   <view class="feature">
     <view class="title"></view>
     <view class="img-title-box">
       <view class="img-center" v-for="(item,index) in swpeTtitle1" name="课程特色标题" ref="buriedPoint5" :key="item.id" @click="featuclick(index,5)">
         <image :src="swiperIndex == index ? item.atveImg : item.imgUrl"></image>
       </view>
     </view>
     <!-- 轮播 -->
     <view class="featu-swiper-box">
       <swiper 
         :current="swiperIndex"
         autoplay
         :circular="true"
         :interval="intervalTime"
         @change="swiperChange"       
         style="overflow: hidden;" 
         duration="400">
         <swiper-item v-for="(k,i) in swpeTtitle1" :key="k.id" id="id1" name="课程特色图片" ref="buriedPoint6"  @click="startclass(6)">
           <image :src="k.imgCenter" class="bannerImg" mode="aspectFill" style="overflow: hidden;"></image>
         </swiper-item>
       </swiper>
        <!-- 指示灯 -->
     <view class="indicator-light">
        <image 
          v-for="(j,x) in swpeTtitle1"
          :key="j.id" 
          class="img-center"
          :class="swiperIndex == x ? 'swiperDotAtver' : ''"
          :src="swiperIndex == x ? j.swiperDotAtver : j.swiperDot"
        >
        </image>
      </view>
     </view>
   </view>
   
   <!-- 科学课程体系 -->
   <view class="science-course">
     <view class="title"></view>
     <view class="img-title-box">
       <view class="img-center" v-for="(item,index) in scienceList" :key="item.id" ref="buriedPoint7" @click="scienceimgClick(index,7)" name="科学课程体系标题">
         <image :src="sciencIndex == index ? item.titleAtve : item.titleUrl"></image>
       </view>
     </view>
     <!-- 轮播 -->
   <div class="backg">
       <div class="item-center-img">
         <swiper
           autoplay
           :current="sciencIndex"
           :circular="true"
           :interval="intervalScience"
           @change="scienceChange"       
           style="overflow: hidden;" 
           duration="400">
           <swiper-item v-for="(k,i) in scienceList" :key="k.id" >
             <image :src="k.imgCenter" class="bannerImg" mode="aspectFill" style="overflow: hidden;"></image>
           </swiper-item>
         </swiper>
       </div>
      </div>
   </view>
   
   <!-- 点击联系老师 -->
   <view class="contact-teache" @click="startclass(8)" ref="buriedPoint8" name="联系老师-了解课程详情按钮-上">
     <image 
      class="btn-img" 
      src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/contact_teache1.png"
      mode="aspectFill"
     >
     </image>
   </view>
   <!-- 好评轮播图 -->
   <view class="praise-box">
    <view class="back-left"></view>
    <view class="back-right">
     <swiper
        autoplay
        indicator-active-color="#FF800C"
        :circular="true"
        :interval="3000"  
        style="overflow: hidden;" 
        duration="400">
        <swiper-item v-for="(k,i) in praiseList" :key="k.id">
          <image :src="k.imgUrl" class="bannerImg" mode="aspectFill" style="overflow: hidden;"></image>
        </swiper-item>
      </swiper>
    </view>
   </view>
   
   <!-- 贴心服务 -->
   <view class="saeve-teache">
     <view class="title"></view>
     <view class="contact-teache" @click="startclass(9)" ref="buriedPoint9" name="联系老师-了解课程详情按钮-下">
       <image 
        class="btn-img" 
        src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/contact_teache1.png"
        mode="aspectFill"
       >
       </image>
     </view>
     <view class="text-img"></view>
   </view>
   
   <!-- 弹窗 -->
   <uni-popup ref="popupcancel" type="center">
     <view class="cancel-order">
    <!--  <view class="inform-title"> -->
        <view class="state-title" v-if="dayNum>=3"><text class="corlr-red">今天</text>开课</view>
        <view v-else class="week">
          <view class="week-title" :class="dayNum == 2 ? 'tuesday' : ''">今天<text class="week-corlr-red">19:00</text>{{ classandConten }}</view>
          <view class="week-title subtitle" v-if="dayNum==1">明天<text class="week-corlr-red">19:00</text> 开班仪式</view>
        </view>
       
      <!-- </view> -->
      <view class="num-contact">已有<text class="corlr-red">{{ contactNum }}</text>联系老师</view>
      <view class="teacher-dialog" @click="closePopuo(11)" ref="buriedPoint11" name="关闭弹窗">
        <image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/popup_add_close.png"></image>
      </view>
      <view class="footer-btn"  @click="addTeacher(10)" ref="buriedPoint10" name="弹窗里的联系老师按钮">
        <image  mode="aspectFill" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/popup_btn.png"></image>
      </view>
     </view>
   </uni-popup>
   
   
   
  </view>
</template>

<script>
  import ta from "./thinkingdata.esm.min"
  import { uploadBehavior } from '@/utils/api.js'
  export default {
  	data() {
  		return {
        guildeTime: null, //课程特色轮播定时器时间
        intervalTime: 3000, // 课程特色轮播时间
        intervalScience: 3000, // 科学课程体系轮播时间
        scienceTime: null, // 科学课程体系定时器时间
        listId: {
          accountid: '',
          platform: '',
          currentid: '',
          radid: '',
          rsid: '',
          deviceid: ''
        },
        wxState: false, // 是否安装微信
        scrollTrackinfo: [],
        timeSpan: null,
        giftsNumber: null, // 礼包数量
        contactNum: parseInt((new Date() - new Date('2022-03-15'))/1000/5), // 联系老师数量
        dayNum: null,
        classandConten: '成立班级',
        giftsSwiperList: [ // 礼包数据
          { id: 1, imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/Mask_group.png'},
          { id: 1, imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/Mask_group-1.png'},
          { id: 1, imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/Mask_group-2.png'},
          { id: 1, imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/Mask_group-3.png'},
          { id: 1, imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/Mask_group-4.png'},
          { id: 1, imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/Mask_group-5.png'}
        ],
        praiseList: [
          { id: 1, imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/praise_list1.png'},
          { id: 2, imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/praise_list2.png'},
          { id: 3, imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/praise_list3.png'},
          { id: 4, imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/praise_list4.png'},
          { id: 5, imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/praise_list5.png'}
        ],
        scienceList: [ // 科学课程体系
          { 
            id: 1,
            imgCenter:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_certer1.png',
            titleUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_title_b1.png',
            titleAtve: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_title_a1.png'
          },
          {
            id: 2,
            imgCenter:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_certer2.png',
            titleUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_title_b2.png',
            titleAtve: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_title_a2.png'
          },
          {
            id: 3,
            imgCenter:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_certer3.png',
            titleUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_title_b3.png',
            titleAtve: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_title_a3.png'
          },
          {
            id: 4,
            imgCenter:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_certer4.png',
            titleUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_title_b4.png',
            titleAtve: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_title_a4.png'
          }
        ],
        sciencIndex: 0, // 科学课程体系下标
        swiperIndex: 0, // 课程特色下标
        swpeTtitle1: [ // 课程特色数据
            { 
              id: 1, 
              imgCenter: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/courses_feature2.png',
              imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_b1.png', 
              atveImg: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_a1.png',
              swiperDot: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp2.png',
              swiperDotAtver: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp.png'
            },
            {
              id: 2, 
              imgCenter: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/courses_feature3.png',
              imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_b2.png', 
              atveImg: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_a2.png',
              swiperDot: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp2.png',
              swiperDotAtver: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp.png'
            },
           {
             id: 3, 
             imgCenter: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/courses_feature4.png',
             imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_b3.png', 
             atveImg: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_a3.png',
             swiperDot: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp2.png',
             swiperDotAtver: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp.png'
           },
           {
             id: 4, 
             imgCenter: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/courses_feature5.png',
             imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_b4.png', 
             atveImg: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_a4.png',
             swiperDot: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp2.png',
             swiperDotAtver: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp.png'
           },
           {
             id: 5, 
             imgCenter: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/courses_feature6.png',
             imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_b5.png', 
             atveImg: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_a5.png',
             swiperDot: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp2.png',
             swiperDotAtver: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp.png'
           },
           {
             id: 6, 
             imgCenter: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/courses_feature7.png',
             imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_b6.png', 
             atveImg: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_tieli_a6.png',
             swiperDot: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp2.png',
             swiperDotAtver: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_lamp.png'
           },
        ],
      }
    },
    onLoad(params) {
      const vm = this
      ta.init(
       {
         appId: '1abdbc658dbb4c518699aa97049e23fd', // 您的项目的 APP_ID
         name: 'ta',
         serverUrl: 'https://receiver.ta.thinkingdata.cn/sync_js', // 上传数据的 URL
         send_method: 'ajax', // 数据上报方式，默认为 'image'
         showLog: true, // 是否打印上报数据，打开后将会在浏览器控制台打印上报的数据，默认为 true 即开启.
         // mode: 'debug_only' // 运行模式，默认为普通模式，可以设置为 debug 或者 debug_only. 
       })
      vm.getDayTime()
      vm.giftBag()
      vm.getRandomNumber(88,120)
      vm.giftNum()
      if(vm.$auth.getUrlPrams("accountid")){
        vm.listId.accountid = vm.$auth.getUrlPrams("accountid")
        console.log('accountid-----',vm.listId.accountid)
      }
      vm.listId.currentid = vm.$auth.getUrlPrams("distinctId") || ta.getDistinctId() // 访客id
      console.log('distinctId-----',vm.listId.currentid)
      
      if(vm.$auth.getUrlPrams("radid")){ //
        vm.listId.radid = vm.$auth.getUrlPrams("radid")
        console.log('radid-----',vm.listId.radid)
      }
      if(vm.$auth.getUrlPrams("rsid")){ // 
        vm.listId.rsid = vm.$auth.getUrlPrams("rsid")
        console.log('rsid-----',vm.listId.rsid)
      }
      if(vm.$auth.getUrlPrams("deviceid")){ //
        vm.listId.deviceid = vm.$auth.getUrlPrams("deviceid")
         console.log('deviceid-----',vm.listId.deviceid)
      }
      if(vm.$auth.getUrlPrams("platform")) {
         vm.listId.platform = vm.$auth.getUrlPrams("platform").toLowerCase() // 转小写
        console.log('platform-----',vm.listId.platform)
       }
       if(vm.$auth.getUrlPrams("wechat")){
          console.log('是否安装微信1-----',vm.$auth.getUrlPrams("wechat"))
         let audsteatStr = vm.$auth.getUrlPrams("wechat").toLowerCase()
         vm.wxState = audsteatStr === 'true' ? true : false
          console.log('是否安装微信2-----', vm.wxState)
       }
        vm.$wechat.unseBehavior()
        ta.identify(vm.listId.currentid || ta.getDistinctId()) //设置访客id
        if(vm.listId.accountid){
           ta.login(vm.listId.accountid) // 设置账号id
        }
        ta.quick("autoTrack") // 自动采集页面浏览事件
        ta.setSuperProperties({ // 设置静态公共属性
          channel: vm.listId.radid,
          rsid: vm.listId.rsid,
          h5_deviceid: vm.listId.deviceid,
        })
        ta.timeEvent('ta_pageview') // 记录事件时长
        ta.timeEvent('click') // 记录事件时长
        ta.timeEvent('scroll_to_anchor') // 记录事件时长
        ta.trackLink( // 监控 HTML 元素点击事件
          {
            tag: ['a', 'view'], //HTML标签
            class: ['class1', 'class2'], //自定义的Class名称
            id: ['id1', 'id2'], //自定义的ID名称
          }, 
          'click', //追踪事件的名称
          {
            production: '产品名', //可以是课程的spu之类的
          } 
      )  
    },
    mounted() {},
    onPageScroll(e) {
      const vm = this
      if(e.scrollTop <= 400){
       if(!vm.checkScrollTrackinfo("1",1000))return;
        ta.track("scroll", { Item: '课程3步' })  
      }
      if(e.scrollTop > 400 && e.scrollTop < 600){
         if(!vm.checkScrollTrackinfo("2",1000))return;
         ta.track("scroll", { Item: '开课奖励' })
      }
      if(e.scrollTop > 600 && e.scrollTop < 1100){
         if(!vm.checkScrollTrackinfo("3",1000))return;
         ta.track("scroll", { Item: '课程特色' })
      }
      if(e.scrollTop > 1100 && e.scrollTop < 1600){
         if(!vm.checkScrollTrackinfo("4",1000))return;
        ta.track("scroll", { Item: '科学课程体系' })
      }
      if(e.scrollTop > 1600){
         if(!vm.checkScrollTrackinfo("5",1000))return;
        ta.track("scroll", { Item: '用户好评' })
      }
    },
    methods:{
      checkScrollTrackinfo(index,ticks){
        const vm = this
        let info = vm.scrollTrackinfo.find(el=>el.pos == index);
        if (!info) {
            info = {pos:index,timeSpan : new Date()};
            vm.scrollTrackinfo.push(info);
        }                                
        if ((new Date() - info.timeSpan) < ticks)return false;
          info.timeSpan = new Date()
        return true;
      },
      // 将用户行为传给后台
      async getUploadBehavior(num) {
        const vm = this
        let report = ''
       if(num === 1){
         report = 'ExperienceCourseSku.Contact'
       }
       if(num === 2){
         report = 'ExperienceCourseSku.InviteAddToWechatGroup'
       }
       if(num === 3){
         report = 'ExperienceCourseSku.GetMyGift'
       }
       if(num === 8 || num === 9){
         report = 'ExperienceCourseSku.ShowMyCourseTeacher'
       }
       if(num === 10){
         report = 'ExperienceCourseSku.ShowMyCourseTeacher.Contact'
       }
        vm.$wechat.unseBehavior(report)
      },
      // 添加老师
      addTeacher(num) {
        const vm = this
        vm.buriedPoint(num)
        window.location.href = 'weixin://dl/business/?t=7MFpzvU7aOg'
        vm.$refs.popupcancel.close()
        vm.getUploadBehavior(num)
      },
      // 点击上传埋点
      buriedPoint(num) {
        const vm = this
         let labels =''
        if(num === 1) {
          labels = this.$refs.buriedPoint1.$attrs.name
        }
        if(num === 2){
           labels = this.$refs.buriedPoint2.$attrs.name
        }
        if(num === 3){
           labels = this.$refs.buriedPoint3.$attrs.name
        }
        if(num === 4){
           labels = this.$refs.buriedPoint4.$attrs.name
        }
        if(num === 5){
           labels = this.$refs.buriedPoint5[0].$attrs.name
        }
        if(num === 6){
           labels = this.$refs.buriedPoint6[0].$attrs.name
        }
        if(num === 7){
           labels = this.$refs.buriedPoint7[0].$attrs.name
        }
        if(num === 8){
           labels = this.$refs.buriedPoint8.$attrs.name
        }
        if(num === 9){
           labels = this.$refs.buriedPoint9.$attrs.name
        }
        if(num === 10){
           labels = this.$refs.buriedPoint10.$attrs.name
        }
        if(num === 11){
           labels = this.$refs.buriedPoint11.$attrs.name
        }
        ta.track("click", { Item: labels })
      },
      // 关闭弹窗
      closePopuo(num) {
        this.buriedPoint(num)
        this.$refs.popupcancel.close()
      },
      // 点击开课奖励打开弹窗
      startclass(num) {
        this.buriedPoint(num)
        this.$refs.popupcancel.open()
        if(num === 8 || num === 9){
          this.getUploadBehavior(num)
        }
      },
      // 点击课程特色标题
      featuclick(index,num) {
        const vm = this
        this.buriedPoint(num)
        this.swiperIndex = index
        this.intervalTime = 10000
        setInterval(()=>{
          this.intervalTime = 3000
           clearInterval(vm.guildeTime)
        },10000)
      },
      // 点击科学课程体系标题
      scienceimgClick(index,num) {
        const vm = this
        this.buriedPoint(num)
        this.sciencIndex = index
        this.intervalScience = 10000
        clearInterval(vm.scienceTime)
        vm.scienceTime = setInterval(()=>{
          this.intervalScience = 3000
          
        },10000)
      },
      // 添加老师数量
      giftBag() {
        const vm = this
         vm.guildeTime = setInterval(()=>{
           vm.contactNum =  vm.contactNum+1;
         },Math.floor(Math.random() *5000 ) + 3000)
      },
      // 生成随机数
      getRandomNumber(max,min) {
        const vm = this
        if(uni.getStorageSync('ContactNum')){
          vm.giftsNumber =  uni.getStorageSync('ContactNum');
        }else{
          this.giftsNumber = Math.floor(Math.random() * (max - min)) + min;
        }
      },
      // 礼包数量
      giftNum() {
        const vm = this
        setInterval(() => {
          if (vm.giftsNumber <= 5) {
            vm.giftsNumber = Math.floor(Math.random() * (88 - 120)) + 120;
          }
          vm.giftsNumber = vm.giftsNumber - 1
          uni.setStorageSync('ContactNum',vm.giftsNumber)
        },20000)
      },
       // 获取周几
      getDayTime() {
        this.dayNum = new Date().getDay() || 7
        if(this.dayNum == 2) {
          this.classandConten = '开班仪式'
        }
      },
      // 科学课程体系
      scienceChange(e) {
        this.sciencIndex = e.detail.current
      },
      // 课程特色轮播图事件
      swiperChange(e) {
        this.swiperIndex = e.detail.current
      }
    }
  }
</script>

<style lang="scss" scoped>
  .warp{
    width: 100%;
    height: auto;
    background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/wapr_back.png');
    background-repeat:repeat-y;
    background-size: 100% 100%;
    padding-bottom: 54rpx;
    .start-class{
      position: relative;
      z-index: 9;
      padding-top: 900rpx;
      margin-bottom: 32rpx;
      .step-add{
        width: 672rpx;
        height: 320rpx;
        background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/guide_add.png');
        background-repeat:repeat-y;
        background-size:100% 100%;
        margin: auto;
        margin-bottom: 32rpx;
        position: relative;
        .btn-contact,.group, .receive{
          position: absolute;
          bottom: 12rpx;
          width: 192rpx;
          height: 72rpx;
        }
        .btn-contact{
          left: 8rpx;
          animation-fill-mode: both;
          animation: btnget 0.4s infinite 1s;
        }
        @keyframes btnget {
          0% { transform: scale(1,1);}
          50% { transform: scale(0.80,0.80);}        
          100% { transform: scale(1,1);}
        }
        .group{
          left: 240rpx;
        }
        .receive{
          right: 8rpx;
        }
        .surplus{
          position: absolute;
          right: 56rpx;
          bottom: 90rpx;
          font-family: 'Source Han Serif CN';
          font-style: normal;
          font-weight: 500;
          font-size: 20rpx;
          color: #FFFFFF;
          .num-red{
            font-size: 24rpx;
            color: #ff0000;
            padding: 0 10rpx;
          }
        }
        // 礼包轮播
        .gifts-swiper{
          width: 138rpx;
          height: 118rpx;
          position: absolute;
          top: 70rpx;
          right: 24rpx;
          swiper{
            height: 118rpx !important;
          }
        }
      }
      .title{
        width: 100%;
        height: 452rpx;
        background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/reward.png');
        background-repeat:repeat-y;
        background-size:100% 100%;
        margin: auto;
      }
    }
    
    // 课程特点
    .feature{
      position: relative;
      z-index: 9;
      .title{
        width: 410rpx;
        height: 116rpx;
        background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/special_title.png');
        background-size:100% 100%;
        margin: auto;
      }
      .img-title-box{
        display: flex;
        flex-wrap: wrap;
        padding: 0 40rpx;
        .img-center{
          width: 200rpx;
          height: 60rpx;
          margin: 20rpx 30rpx 0 0;
        }
        .img-center:nth-child(3n){
          margin-right: 0;
        }
      }
      
      .featu-swiper-box{
        padding: 0 40rpx;
        margin-top: 12rpx;
        swiper{
          height: 372rpx !important;
        }
        .indicator-light{
          display: flex;
          justify-content: center;
          align-items: center;
          .img-center{
            width: 22rpx;
            height: 22rpx;
            margin: 16rpx 12rpx 0 12rpx;
          }
          .swiperDotAtver{
            width: 34rpx;
            height: 34rpx;
          }
        }
      }
    }
    
    // 科学课程体系
    .science-course{
      position: relative;
      z-index: 9;
      margin-top: 50rpx;
      .title{
        width: 400rpx;
        height: 116rpx;
        background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_title.png');
        background-repeat:repeat-y;
        background-size:100% 100%;
        margin: auto;
      }
      .img-title-box{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 34rpx 0 -60rpx 0;
        position: relative;
        z-index: 10;
        .img-center{
          width: 96rpx;
          height: 60rpx;
          margin: 0 24rpx;
        }
      }
      // 轮播
      .backg{
        width: 730rpx;
        height: 1034rpx;
        background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/science_back.png');
        background-repeat:repeat-y;
        background-size:100% 100%;
        margin-left: auto;
        position: relative;
       .item-center-img{
         width: 520rpx;
         height: 928rpx;
         position: absolute;
         bottom: 29rpx;
         right: 40rpx;
        swiper{
            height: 928rpx !important;
          }
        }
       .arrow{
           position: absolute;
           top: 46%;
           width: 72px;
           height: 72px;
        }    
      }
    }
    
    // 联系老师
    .contact-teache{
      padding: 44rpx 40rpx 16rpx 40rpx;
     .btn-img{
        width: 670rpx;
        height: 80rpx;
      }
    }
    // 好评轮播图
    .praise-box{
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 40rpx;
      .back-left{
        width: 384rpx;
        height: 680rpx;
        background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/contact_teache2.png');
        background-repeat:repeat-y;
        background-size:100% 100%;
        margin-right: 20rpx;
      }
     .back-right{
        width: 266rpx;
        height: 680rpx;
        background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/contact_teache3.png');
        background-repeat:repeat-y;
        background-size:100% 100%;
        padding: 8rpx 12rpx 0 12rpx;
        swiper{
          height: 512rpx;
        }
      }
    }

    
    // 贴心服务
    .saeve-teache{
      position: relative;
      z-index:9;
      margin-top: 42rpx;
      .title{
        width: 596rpx;
        height: 362rpx;
        background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/saeve1.png');
        background-repeat:repeat-y;
        background-size:100% 100%;
        margin: auto;
      }
      .text-img{
        width: 574rpx;
        height: 66rpx;
        background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/saeve2.png');
        background-repeat:repeat-y;
        background-size:100% 100%;
        margin: auto;
      }
    }
    /deep/ .uni-popup-mantle{
      background-color: rgba(0, 0, 0, 0.6) !important;
    }
    // 弹窗
    .cancel-order{
      width: 560rpx;
      height: 656rpx;
      background-image: url('https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/popup_add.png');
      background-repeat:repeat-y;
      background-size:100% 100%;
      text-align: center;
      position: relative;
      // .inform-title{
      //   width: 466rpx;
      //   height: auto;
      //   background: rgba(255, 255, 255, 0.4);
      //   border: 2rpx solid #FFFFFF;
      //   box-sizing: border-box;
      //   border-radius: 20rpx;
      //   position: absolute;
      //   top: 42rpx;
      //   left: 90rpx;
      //   font-size: 38rpx;
      //   
      .state-title{
         font-size: 40rpx;
         font-weight: 700;
         padding-top: 50rpx;
         color: #001F74;
         .corlr-red{
           color: #FF0000;
         }
      }
      .week{
        .week-title{
          font-size: 30rpx;
          font-weight: 700;
          padding-top: 38rpx;
          color: #001F74;
          .week-corlr-red{
             color: #FF0000;
          }
        }
        .tuesday{
           padding-top: 60rpx;
        }
        .subtitle{
          padding-top: 0rpx;
        }
      }
      .login-title{
        font-size: 24rpx;
        font-weight: 700;
        color: #001F74;
      }
      // }
      .num-contact{
        font-size: 24rpx;
        font-weight: 700;
        color: #001F74;
       .corlr-red{
         color: #FF0000;
         padding: 0 10rpx;
       }
      }
      .teacher-dialog{
        width: 48rpx;
        height: 48rpx;
        position: absolute;
        top: -40rpx;
        right: -35rpx;
      }
      .footer-btn{
        width: 440rpx;
        height: 96rpx;
        position: absolute;
        left: 60rpx;
        bottom: 40rpx;
        animation-fill-mode: both;
        animation: btnget 0.55s infinite 1s;
      }
      @keyframes btnget {
         0% { transform: scale(1,1);}
         50% { transform: scale(0.93,0.93);}        
         100% { transform: scale(1,1);}
       }
    }
  }
</style>
